<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: wjk
 * @LastEditTime: 2019-12-31 15:51:20
 * @description: file content
 -->
<template>
  <base-page-view class-name="coupon-container coupon-list">
    <view class="coupon-nav-container">
      <view
        v-for="(item, index) in navItems"
        :key="item.value"
        class="nav-item"
        :class="{'active': params.selectedIndex === (index + 1)}"
        @click="onItemClick(index, item)"
      >{{ item.label }}({{ item.num > 99 ? '99+' : item.num }})</view>
    </view>
    <base-list-view
      ref="mescroll"
      :top="100"
      :is-empty="isEmpty"
      btn-text="返回"
      empty-type="empty_coupon"
      empty-text="暂无优惠券~"
      @btnClick="handleBtnClick"
      @onPullRefresh="onPullRefresh"
      @onLoadMore="onLoadMore">
      <coupon-list :type="'mine'" :coupon-state="(params.selectedIndex - 1)" :coupon-list="couponList" @selectCoupon="selectCoupon"></coupon-list>
    </base-list-view>
  </base-page-view>
</template>

<script>
import BaseListView from '@/components/base/base-listview'
import couponList from '@/components/coupon-list/coupon-list'
import './index.scss'
export default {
  components: {
    BaseListView,
    couponList
  },
  data() {
    return {
      navItems: [
        { label: '未使用', value: 1, num: 0 },
        { label: '已使用', value: 2, num: 0 },
        { label: '已过期', value: 3, num: 0 }
      ],
      params: {
        pageSize: 10,
        page: 1,
        selectedIndex: 1, // 当前选中项的序号 默认全部
        nomore: false
      },
      couponList: [],
      nouseList: [],
      hasuseList: [],
      datedList: []
    }
  },
  computed: {
    isEmpty() {
      return this.couponList.length <= 0
    }
  },
  created() {
    this.getNum()
  },
  methods: {
    // 初始化获取三个数据
    async getNum() {
      const re1 = await this._getDataList({ index: 1, page: 1, pageSize: 10 })
      const re2 = await this._getDataList({ index: 2, page: 1, pageSize: 10 })
      const re3 = await this._getDataList({ index: 3, page: 1, pageSize: 10 })
      if (re1.success) {
        this.navItems[0].num = re1.data.total
        this.nouseList = re1.data.records
      }
      if (re2.success) {
        this.navItems[1].num = re2.data.total
        this.hasuseList = re2.data.records
      }
      if (re3.success) {
        this.navItems[2].num = re3.data.total
        this.datedList = re3.data.records
      }
      this.initData()
    },
    onItemClick(index) {
      this.params.selectedIndex = (index + 1)
      this.params.page = 1
      this.params.nomore = false
      this.$refs.mescroll.mescroll.resetUpScroll(true)
    },
    selectCoupon() {},
    handleBtnClick() {
      this.$navigateTo('/pages/mine/index', '', 'switchTab')
    },
    // 初始化数据
    initData() {
      this.params.page = 1
      this.params.nomore = false
      if (this.params.selectedIndex === 1) {
        this.couponList = this.nouseList
      }
      if (this.params.selectedIndex === 2) {
        this.couponList = this.hasuseList
      }
      if (this.params.selectedIndex === 3) {
        this.couponList = this.datedList
      }
    },
    // 获取优惠券列表
    async _getDataList(data) {
      const result = await this.$api.couponApi.myCouponList({
        type: data.index,
        page_no: data.page,
        page_size: data.pageSize
      })
      return result
    },
    // 下拉刷新
    async onPullRefresh(mescroll) {
      this.params.page = 1
      this.params.nomore = false
      this.commonData(mescroll)
    },
    // 上拉加载
    async onLoadMore(mescroll) {
      if (this.params.nomore) {
        mescroll.endErr()
        return
      }
      this.params.page = mescroll.num
      this.commonData(mescroll)
    },
    async commonData(mescroll) {
      const params = { index: this.params.selectedIndex, page: this.params.page, pageSize: this.params.pageSize }
      const res = await this._getDataList(params)
      if (res.success) {
        if (this.params.page === 1) {
          this.couponList = []
        }
        this.couponList = this.couponList.concat(res.data.records)
        if (res.data.records.length < this.params.pageSize) {
          this.params.nomore = true
        }
        this.navItems[this.params.selectedIndex - 1].num = res.data.total
        mescroll.endSuccess(this.params.pageSize)
      } else {
        this.couponList = []
        mescroll.endErr()
      }
    }
  }
}
</script>
